import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import axios from 'axios';
import { FaBell } from 'react-icons/fa';
import './Dashboard.css';

const EmployeeDashboard = () => {
  const [recentNotifications, setRecentNotifications] = useState([]);
  const [stats, setStats] = useState({
    totalReceived: 0,
    unreadReceived: 0
  });
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  // 获取通知统计和最近通知
  useEffect(() => {
    const fetchDashboardData = async () => {
      try {
        setLoading(true);
        // 获取接收通知统计
        const statsRes = await axios.get('/notifications/received/stats');
        // 获取最近通知
        const notificationsRes = await axios.get('/notifications?page=1&limit=5');

        setStats(statsRes.data);
        setRecentNotifications(notificationsRes.data.notifications || []);
      } catch (err) {
        console.error('获取数据失败', err);
        setError('获取数据失败，请刷新页面重试');
      } finally {
        setLoading(false);
      }
    };

    fetchDashboardData();
  }, []);

  if (loading) {
    return <div className="dashboard-loading">加载中...</div>;
  }

  if (error) {
    return <div className="dashboard-error">{error}</div>;
  }

  return (
    <div className="dashboard-container">
      <h1 className="dashboard-title">员工工作台</h1>

      {/* 统计卡片 */}
      <div className="stats-cards">
        <div className="stat-card">
          <div className="stat-card-content">
            <h3 className="stat-card-title">接收任务总数</h3>
            <p className="stat-card-value">{stats.totalReceived}</p>
          </div>
        </div>

        <div className="stat-card">
          <div className="stat-card-content">
            <h3 className="stat-card-title">未查收任务数</h3>
            <p className="stat-card-value">{stats.unreadReceived}</p>
          </div>
        </div>
      </div>

      <div className="employee-dashboard-content">
        <div className="recent-notifications-card">
          <div className="card-header">
            <h2>最近任务</h2>
            <Link to="/notifications" className="view-all-link">查看全部</Link>
          </div>

          {recentNotifications.length === 0 ? (
            <div className="no-notifications">
              <p>暂无通知</p>
            </div>
          ) : (
            <div className="notifications-list">
              {recentNotifications.map(notification => (
                <div key={notification.id} className={`notification-item ${!notification.is_read ? 'unread' : ''}`}>
                  <div className="notification-header">
                    <h3 className="notification-title">{notification.title}</h3>
                    <span className="notification-time">
                      {new Date(notification.created_at).toLocaleString()}
                    </span>
                  </div>
                  <p className="notification-content">{notification.content}</p>
                  <div className="notification-sender">
                    发送者: {notification.sender_full_name || notification.sender_username}
                  </div>
                </div>
              ))}
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

export default EmployeeDashboard;